<template>
  <div
    class="toDoItem"
    v-for="(item, index) in todoList"
    :key="index"
    @click="goNext(item.jobType)"
  >
    <img src="../../static/need_bg.png" alt="" class="itemBg" />
    <div class="todoCategory">{{ item.productName }}</div>
    <div class="creditInfo">
      <div class="creditTitle">授信金额</div>
      <div class="creditNum">
        <div class="moneyNum">
          ￥<span>{{ item.creditMoney }}</span>
        </div>
        <div class="moneyRate">
          <span class="rateTitle">授信利率</span>{{ item.yearRate + "%" }}
        </div>
      </div>
    </div>
    <div class="todoLine"></div>
    <div class="todoInfo">
      <div class="todoInfoCategory">
        任务类型：
        <span :class="item.jobType === '4' ? 'faceContact' : 'loanContact'">{{
          item.jobType === "4" ? "签署面谈承诺书" : "签署借款合同"
        }}</span>
      </div>
      <div class="todoDate">
        创建日期：<span>{{ item.createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const todoList = reactive([]);
onMounted(() => {
  http
    .myCommission({
      interviewContractId: store.interviewContractId,
      borrowContractId: store.borrowContractId,
    })
    .then((res) => {
      todoList.push(...res.data);
    });
});
const goNext = (options) => {
  // 对入参进行判断决定下一步
  console.log(options);
  if (options === "4") {
    wx.navigateTo({
      url: "../facePromise/facePromise",
    });
  } else if (options === "6") {
    wx.navigateTo({
      url: "../signContract/signContract",
    });
  }
};
</script>

<style scoped lang="scss">
.toDoItem {
  height: 333rpx;
  padding: 0 80rpx;
  margin: 0 7rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .itemBg {
    width: 736rpx;
    height: 333rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -99999;
  }
  .todoCategory {
    height: 33rpx;
    position: absolute;
    top: 19rpx;
    right: 36rpx;
    color: #fff;
  }
  .todoLine {
    width: 590rpx;
    height: 1rpx;
    background-color: #979797;
    opacity: 23%;
  }
  .creditInfo,
  .todoInfo {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .creditInfo {
    color: #333333;
    .creditTitle {
      padding-top: 30rpx;
      margin-bottom: 5rpx;
    }
    .creditNum {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .moneyNum {
        height: 70rpx;
        line-height: 70rpx;
        font-size: 50rpx;
        color: #307be5;
      }
      .moneyRate {
        font-size: 30rpx;
        .rateTitle {
          font-size: 24rpx;
          margin-right: 13rx;
        }
      }
    }
  }
  .todoInfo {
    .todoInfoCategory {
      color: #333;
      margin-bottom: 20rpx;
      .faceContact {
        color: #f3a448;
      }
      .loanContact {
        color: #4f7cfe;
      }
    }
  }
}
</style>
<style>
page {
  background: #f8f9fa;
}
</style>
